<template>
    <!-- <KeepAlive include="uImgs,videoUpload"> -->
    <div class="fromData">
        <el-form :rules="Yrules" :model="ruleForm" ref="ruleFormRef" label-width="160px" label-suffix=" :">

            <el-form-item label="请输入你的店铺名" prop="shopName">
                <el-col :span="8">
                    <el-input v-model="ruleForm.shopName" />
                </el-col>
            </el-form-item>

            <el-form-item label="店铺图片" prop="storeImg">
                <uImgs ref="clearImg" @getImgurl="getImgName"></uImgs>
            </el-form-item>

            <el-form-item label="手机号" prop="phone">
                <el-col :span="4">
                    <el-input v-model="ruleForm.phone" placeholder="请填写手机号"></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="选择营业时间" required>
                <el-col :span="2">
                    <el-form-item prop="date1">
                        <el-time-picker v-model="ruleForm.date1" aria-label="选择时间" placeholder="选择时间" style="width: 100%" />
                    </el-form-item>
                </el-col>
                <el-col class="text-center" style="justify-content: center;" :span="1">
                    <span class="text-gray-500">-</span>
                </el-col>
                <el-col :span="2">
                    <el-form-item prop="date2">
                        <el-time-picker v-model="ruleForm.date2" aria-label="选择时间" placeholder="选择时间" style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-form-item>

            <el-form-item label="门店状态" prop="status">
                <el-select v-model="ruleForm.status" placeholder="请选择类型限制">
                    <el-option label="营业" value="0" />
                    <el-option label="打烊" value="1" />
                </el-select>
            </el-form-item>

            <el-form-item label="经纬度" required>
                <el-col :span="2">
                    <el-form-item prop="latitude">
                        <el-input :disabled="true" v-model="ruleForm.latitude" />
                    </el-form-item>

                </el-col>
                <el-col class="text-center" style="justify-content: center;" :span="1">
                    <span class="text-gray-500">-</span>
                </el-col>
                <el-col :span="2">
                    <el-form-item prop="longitude">
                        <el-input :disabled="true" v-model="ruleForm.longitude" />
                    </el-form-item>
                </el-col>
            </el-form-item>


            <el-form-item label="位置" prop="shopAddress">
                <div class="map">
                    <el-col :span="8">
                        <el-input :disabled="true" v-model="ruleForm.shopAddress" />
                    </el-col>
                    <SiteInfo @getMapAddress="getMapAddress"></SiteInfo>
                </div>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" :loading="loading" @click="uploadData(ruleFormRef)">上传</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>



        </el-form>

        <div style="height: 150px;">

        </div>
    </div>

    <!-- </KeepAlive> -->
</template>

<script setup>
import { ref, reactive, toRaw, watch, watchEffect, onMounted, computed, onUpdated } from "vue"
import uImgs from "@/components/Upload/uImg.vue"
import VideoUpload from "@/components/Upload/videoUpload.vue"
import { mainStore } from "@/stores"
import SiteInfo from "@/components/Map/siteInfo.vue"
// import { worksData } from "@/stores/worksData.js"
import { ElMessage, ElLoading } from 'element-plus'
import { format } from 'date-fns';
import { userManage } from "@/stores/user.js"

const labelPosition = ref('img')

let userStore = userManage()
const mStore = mainStore()

//上传按钮的加载事件
let loading = ref(false)

//表单实例
let ruleFormRef = ref()

// 上传图片的实例
let clearImg = ref()



let ruleForm = reactive({
    shopName: "",
    storeImg: "",
    shopAddress: "",
    status: "0",
    date1: "",
    date2: "",
    latitude: "",
    longitude: "",
    status: "0",
    phone: "",
    shopId: ""


})

let Yrules = reactive({
    shopName: [{ required: true, message: '请填写店铺名', trigger: 'blur' }],
    shopAddress: [{ required: true, message: '请选择上传作品的位置', trigger: 'blur' }],
    storeImg: [{ required: true, message: '图片不能为空', trigger: 'blur' }],
    phone: [{ required: true, message: '电话号码不能为空', trigger: 'blur' }],
    date1: [
        {
            type: 'date',
            required: true,
            message: '请选择时间',
            trigger: 'change',
        },
    ],
    date2: [
        {
            type: 'date',
            required: true,
            message: '请选择时间',
            trigger: 'change',
        },
    ],
    status: [
        {
            type: 'date',
            required: true,
            message: '请选择时间',
            trigger: 'change',
        },
    ],
    latitude: [
        {
            required: true,
            message: '请选择纬度',
            trigger: 'blur',
        },
    ],
    longitude: [
        {
            required: true,
            message: '请选择经度',
            trigger: 'blur',
        },
    ],

})

let contentType = ref("内容")

// let userList = computed(() => {
//     return mStore.userList
// })

// 获取点击地图后的详细地址
let getMapAddress = (e) => {
    // console.log(e, "地址")
    ruleForm.shopAddress = e.address
    ruleForm.latitude = e.latitude
    ruleForm.longitude = e.longitude

}



watchEffect(() => {
    ruleForm.shopId = userStore.userShopData.shopId
    ruleForm.phone = userStore.userShopData.phone
    ruleForm.shopAddress = userStore.userShopData.shopAddress
    ruleForm.latitude = userStore.userShopData.latitude
    ruleForm.longitude = userStore.userShopData.longitude
    ruleForm.shopName = userStore.userShopData.shopName
    // console.log("userShopData")

})

// 获取上传图片的名字
const getImgName = (e) => {

    // console.log(e, "获取图片")
    ruleForm.storeImg = e
    // let index = ruleForm.image.indexOf(e)
    // ruleForm.type = 2
    // videoRef.value.closeVideo()
    // contentType.value = "图片"
    // // console.log(index)

    // if (index !== -1) {
    //     ruleForm.image.splice(index, 1)
    // } else {

    //     ruleForm.image.push(e)


    // }
    // ruleForm.image.push(e)
    // console.log(e, "我是父亲里面的孩子")

}

//上传数据
let uploadData = (formEl) => {
    if (!formEl) return
    // console.log(ruleForm, "formEl");

    //     if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            submitData()
            formEl.resetFields()
        } else {
            // console.log(valid, 'error submit!')

            ElMessage({
            message: '更新失败',
            type: 'error',
            plain: true,
        })
        }
    })
    //     console.log(ruleForm,"ruleForm")
}

//上传数据

let submitData = async () => {
    // console.log(ruleForm,"上传数据")
    let res = await userStore.setUserStoreInfo(ruleForm)

    if (res.code == 200) {
        ElMessage({
            message: res.mess,
            type: 'success',
            plain: true,
        })
    } else {
        ElMessage({
            message: '更新失败',
            type: 'error',
            plain: true,
        })
    }

}

// 重置
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
    clearImg.value.clearImg()

}


// // 获取上传视频的名字
// const getVideoName = (e) => {
//     ruleForm.video = e
//     ruleForm.type = 3
//     contentType.value = "视频"
//     ruleForm.image = []
//     uImgsCallback.value.clearImgArr()
//     // console.log(e, "我是父亲里面的视频")
// }

// //清除视频名字
// const removeVideoName = () => {
//     ruleForm.video = ""

// }

//监听一下上传的是什么



// 上传作品
const uploadFile = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        // console.log(valid, "valid")
        if (valid) {
            // console.log(toRaw(ruleForm))
            uploadworksDataCallBack()
        } else {
            console.log('error submit!', fields)
        }
    })

}

// 上传作品函数
let uploadworksDataCallBack = async () => {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    loading.value = true
    // ruleForm
    try {
        let res = await mWorks.userUplaodWorksData(toRaw(ruleForm))
        if (res == "ok") {
            ElMessage({
                showClose: true,
                message: '上传成功',
                type: 'success',
            })
            resetForm(ruleFormRef.value)
        } else {
            ElMessage({
                showClose: true,
                message: '上传失败',
                type: 'error',
            })
        }
    } finally {
        loading.value = false
        setTimeout(() => {
            loading.close()

        }, 600)
    }

}



// 获取所有的用户
// let getAllUserInfo = async () => {
//     let res  =await mStore.getAllUser(ruleForm)


// }

onUpdated(()=>{
  
  // console.log(reformData.imageUrl, "已挂载为什么就挂在了")
  userStore.imgUrl = ruleForm.storeImg
  
})

onMounted(() => {
    // getAllUserInfo()
})

</script>

<style lang="scss" scoped>
.fromData {
    width: 100%;
    padding: 20px;

    .map {
        display: flex;
        flex-direction: column;
        width: 100%;

        .el-col {
            margin-bottom: 30px;
        }
    }

    .text-center {
        display: flex;
        justify-content: center;
    }

}
</style>